<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form ref="tableForm" :inline="true" :model="listQuery">
        <el-row>
          <el-col :span="4">
            <el-form-item label="用户昵称" prop="nickname">
              <el-input
                v-model="listQuery.nickname"
                @keyup.enter.native="handleFilter"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="手机号" prop="mobile">
              <el-input
                v-model="listQuery.mobile"
                @keyup.enter.native="handleFilter"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="邀请码" prop="user_code">
              <el-input
                v-model="listQuery.user_code"
                @keyup.enter.native="handleFilter"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="推荐人" prop="p_nickname">
              <el-input
                v-model="listQuery.p_nickname"
                @keyup.enter.native="handleFilter"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="注册时间" prop="created_at">
              <el-date-picker
                v-model="listQuery.created_at"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="用户状态" prop="status">
              <el-select v-model="listQuery.status" placeholder="请选择">
                <el-option label="正常" value="1" />
                <el-option label="禁用" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="rid" prop="rid">
              <el-input
                v-model="listQuery.rid"
                @keyup.enter.native="handleFilter"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button @click="resetForm('tableForm')">重置</el-button>
            <el-button
              v-waves
              type="primary"
              icon="el-icon-search"
              @click="handleFilter"
            >
              {{ $t("table.search") }}
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="totalBox">
      <div>累计结算：{{ totalNum.total_settlement_amount }}</div>
      <div>累计提现：{{ totalNum.total_withdrawal_amount }}</div>
      <div>累计账户余额：{{ totalNum.total_account_balance }}</div>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      @sort-change="sortChange"
    >
      <el-table-column label="用户信息" prop="user" align="center" width="300">
        <template slot-scope="{ row }">
          <div class="goodsInfo">
            <el-avatar
              :src="row.headimgurl"
              :size="50"
              fit="contain"
              @error="errorHandler"
            >
              <img
                src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
              />
            </el-avatar>
            <div class="textBox">
              <el-tooltip effect="dark" placement="top" :content="row.nickname">
                <div class="content">昵称：{{ row.nickname }}</div>
              </el-tooltip>
              <el-tooltip effect="dark" placement="top" :content="row.rid + ''">
                <div class="content">RID: {{ row.rid }}</div>
              </el-tooltip>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="手机号" prop="mobile" align="center" />
      <el-table-column label="邀请码" prop="user_code" align="center" />
      <el-table-column label="推荐人昵称" prop="p_nickname" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.p_nickname || "-" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="累计结算"
        prop="total_settlement_amount"
        align="center"
        sortable
      >
        <template slot-scope="{ row }">
          <span>{{ row.user_info.total_settlement_amount || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="累计提现"
        prop="total_withdrawal_amount"
        align="center"
        sortable
      >
        <template slot-scope="{ row }">
          <span>{{ row.user_info.total_withdrawal_amount || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="账户余额"
        prop="account_balance"
        align="center"
        sortable
      >
        <template slot-scope="{ row }">
          <span>{{ row.user_info.account_balance || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" align="center">
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.status"
            :active-value="1"
            :inactive-value="2"
            @change="handleStatuChange($event, row.id)"
          />
        </template>
      </el-table-column>
      <el-table-column label="邀请状态" prop="invitation_status" align="center">
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.invitation_status"
            :active-value="1"
            :inactive-value="2"
            @change="handleiInvitationChange($event, row.id)"
          />
        </template>
      </el-table-column>
      <el-table-column label="注册渠道" prop="register_way" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.register_way === "1" ? "PC" : "公众号" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="注册时间"
        prop="created_at"
        align="center"
        width="170"
      />
      <el-table-column
        :label="$t('table.actions')"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            size="mini"
            @click="handleUpdateBalance(row)"
          >
            调整余额
          </el-button>
          <el-button size="mini" @click="handleUpdate(row)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <el-dialog
      title="用户详情"
      center
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="1">
          <el-form
            ref="dataForm"
            :model="temp"
            label-position="left"
            label-width="100px"
            style="width: 400px; margin-left: 50px"
          >
            <el-form-item label="头像">
              <el-upload
                class="avatar-uploader"
                :action="baseUrl + '/upload'"
                :show-file-list="false"
                :headers="headers"
                name="image"
                :on-success="handleTopSuccess"
              >
                <img
                  v-if="temp.headimgurl"
                  :src="temp.headimgurl"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="temp.nickname" />
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
              <el-input v-model="temp.mobile" />
            </el-form-item>
            <el-form-item label="邀请码" prop="user_code">
              <el-input v-model="temp.user_code" />
            </el-form-item>
            <el-form-item label="推荐人昵称" prop="p_nickname">
              <el-select
                v-if="changeReference"
                v-model="temp.p_nickname"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in recommendList"
                  :key="item.id"
                  :label="item.nickname"
                  :value="item.nickname"
                />
              </el-select>
              <span v-else>{{ temp.p_nickname }}</span>
            </el-form-item>
            <el-form-item label="支付宝" prop="alipay_account">
              <el-input v-model="temp.alipay_account" />
            </el-form-item>
            <el-form-item label="支付宝姓名" prop="alipay_name">
              <el-input v-model="temp.alipay_name" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-switch
                v-model="temp.status"
                :active-value="1"
                :inactive-value="2"
              />
            </el-form-item>
          </el-form>
          <div class="dataBox">
            <div class="item">
              <span>今日付款预估:</span>
              <span>{{ temp.today_pay_income }}</span>
            </div>
            <div class="item">
              <span>今日付款订单:</span>
              <span>{{ temp.today_pay_order_count }}</span>
            </div>
            <!-- <div class="item">
              <span>昨日付款预估:</span>
              <span>{{ temp.yesterday_pay_income }}</span>
            </div>
            <div class="item">
              <span>本月付款预估:</span>
              <span>{{ temp.month_pay_income }}</span>
            </div>
            <div class="item">
              <span>上月付款预估:</span>
              <span>{{ temp.last_month_pay_income }}</span>
            </div>
            <div class="item">
              <span>今日收货预估:</span>
              <span>{{ temp.today_end_income }}</span>
            </div>
            <div class="item">
              <span>昨日收货预估:</span>
              <span>{{ temp.yesterday_end_income }}</span>
            </div>
            <div class="item">
              <span>本月收货预估:</span>
              <span>{{ temp.month_end_income }}</span>
            </div>
            <div class="item">
              <span>上月收货预估:</span>
              <span>{{ temp.last_month_end_income }}</span>
            </div> -->
          </div>
          <div class="dataBox">
            <div class="item">
              <span>注册登录IP:</span>
              <span>{{ temp.register_ip }}</span>
            </div>
            <div class="item">
              <span>注册时间:</span>
              <span>{{ temp.created_at }}</span>
            </div>
            <div class="item">
              <span>最后登录IP:</span>
              <span>{{ temp.last_login_ip }}</span>
            </div>
            <div class="item">
              <span>最后登录时间:</span>
              <span>{{ temp.last_login_time }}</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="直推粉丝" name="2">
          <el-table
            :data="levelUserList"
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column label="用户昵称" prop="nickname" align="center" />
            <el-table-column label="手机号" prop="mobile" align="center" />
            <el-table-column
              label="累计结算"
              prop="total_settlement_amount"
              align="center"
              sortable
            >
              <template slot-scope="{ row }">
                <span>{{ row.user_info.total_settlement_amount || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="累计提现"
              prop="total_withdrawal_amount"
              align="center"
              sortable
            >
              <template slot-scope="{ row }">
                <span>{{ row.user_info.total_withdrawal_amount || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="账户余额"
              prop="account_balance"
              align="center"
              sortable
            >
              <template slot-scope="{ row }">
                <span>{{ row.user_info.account_balance || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="注册渠道"
              prop="register_way"
              align="center"
            >
              <template slot-scope="{ row }">
                <span>{{ row.register_way === "1" ? "PC" : "公众号" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="注册时间"
              prop="created_at"
              align="center"
              width="170"
            />
          </el-table>

          <pagination
            v-show="userTotal > 0"
            :total="userTotal"
            :page.sync="userListQuery.page"
            :limit.sync="userListQuery.limit"
            @pagination="getUserList"
          />
        </el-tab-pane>
        <el-tab-pane label="订单明细" name="3">
          <el-tabs v-model="orderName" @tab-click="handleOrderClick">
            <el-tab-pane label="自购分享" name="share" />
            <el-tab-pane label="一级提成" name="commission" />
          </el-tabs>
          <el-table
            :data="orderList"
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column
              label="商品名称"
              prop="product_title"
              align="center"
              show-overflow-tooltip
              width="160"
            />
            <el-table-column
              label="推广用户"
              prop="mobile"
              align="center"
              width="100"
            >
              <template slot-scope="{ row }">
                <span>{{ row.user.nickname }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="付款时间"
              prop="pay_at"
              align="center"
              width="160"
            />
            <el-table-column
              label="付款金额"
              prop="order_amount"
              align="center"
            />
            <el-table-column
              label="补贴金额"
              prop="order_commission_amount"
              align="center"
            >
              <template slot-scope="{ row }">
                {{ row.products.subsidy_amount }}
              </template>
            </el-table-column>
            <el-table-column label="订单状态" prop="status" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.status | statusFilter }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="收货时间"
              prop="end_time"
              align="center"
              width="160"
            />
            <el-table-column
              label="结算状态"
              prop="is_settlement"
              align="center"
            >
              <template slot-scope="{ row }">
                <span>{{ row.is_settlement | settlementFilter }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="结算时间"
              prop="settlement_time"
              align="center"
              width="160"
            />
          </el-table>
          <pagination
            v-show="orderTotal > 0"
            :total="orderTotal"
            :page.sync="orderListQuery.page"
            :limit.sync="orderListQuery.limit"
            @pagination="getOrderList"
          />
        </el-tab-pane>
        <el-tab-pane label="余额明细" name="4">
          <el-row style="margin: 10px 0 20px 0" type="flex" align="middle">
            <el-col :span="2">类型：</el-col>
            <el-col :span="6">
              <el-select
                v-model="balanceQuery.type"
                placeholder="请选择"
                size="mini"
                @change="getBalanceList"
              >
                <el-option label="全部" :value="null"> </el-option>
                <el-option label="收入" :value="1"> </el-option>
                <el-option label="支出" :value="2"> </el-option>
              </el-select>
            </el-col>
          </el-row>

          <el-table
            :data="balanceList"
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column
              label="类型"
              prop="change_type"
              align="center"
              show-overflow-tooltip
              width="100"
            >
              <template slot-scope="{ row }">
                <span v-text="row.change_type == 1 ? '收入' : '支出'" />
              </template>
            </el-table-column>
            <el-table-column
              label="变动金额"
              prop="change_amount"
              align="center"
            />
            <el-table-column
              label="描述"
              prop="change_desc"
              align="center"
              width="180"
            />
            <el-table-column
              label="单据号"
              prop="order_sn"
              align="center"
              width="200"
            />
            <el-table-column
              label="创建时间"
              prop="created_at"
              align="center"
              width="160"
            />
            <el-table-column
              label="修改时间"
              prop="updated_at"
              align="center"
              width="160"
            />
          </el-table>
          <pagination
            v-show="balanceTotal > 0"
            :total="balanceTotal"
            :page.sync="balanceQuery.page"
            :limit.sync="balanceQuery.limit"
            @pagination="getBalanceList"
          />
        </el-tab-pane>
      </el-tabs>
      <div v-if="activeName === '1'" slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          {{ $t("table.cancel") }}
        </el-button>
        <el-button type="primary" @click="updateData()">
          {{ $t("table.confirm") }}
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="调整余额"
      center
      :visible.sync="balanceFormVisible"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="balanceForm"
        :model="balanceData"
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="调整类型" prop="change_type">
          <el-radio-group v-model="balanceData.change_type">
            <el-radio :label="1"> 增加 </el-radio>
            <el-radio :label="2"> 减少 </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="调整金额" prop="change_amount">
          <el-input v-model="balanceData.change_amount" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateBalance">
          {{ $t("table.confirm") }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  fetchUserList,
  fetchLevelList,
  userEdit,
  fetchShareList,
  fetchCommissionList,
  userIncome,
  adjustBalance,
  userRecommend,
  getBalance,
} from "@/api/index";
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { getToken } from "@/utils/auth";

export default {
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: "待支付",
        1: "已支付",
        2: "已取消",
        3: "已完成",
        4: "已退款",
      };
      return statusMap[status];
    },
    settlementFilter(status) {
      const statusMap = {
        1: "未结算",
        2: "已结算",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      balanceList: [],
      baseUrl: process.env.VUE_APP_BASE_API,
      headers: {
        "access-token": getToken(),
      },
      activeName: "1",
      orderName: "share",
      tableKey: 0,
      levelUserList: null,
      list: null,
      orderList: null,
      total: 0,
      userTotal: 0,
      orderTotal: 0,
      balanceTotal: 0,
      listLoading: false,
      balanceQuery: {
        page: 1,
        limit: 10,
        type: null,
      },
      userListQuery: {
        page: 1,
        limit: 10,
      },
      listQuery: {
        page: 1,
        limit: 20,
      },
      orderListQuery: {
        page: 1,
        limit: 10,
      },
      sortOptions: [
        { label: "ID Ascending", key: "+id" },
        { label: "ID Descending", key: "-id" },
      ],
      statusOptions: ["published", "draft", "deleted"],
      showReviewer: false,
      temp: {
        id: undefined,
        importance: 1,
        remark: "",
        timestamp: new Date(),
        title: "",
        type: "",
        status: "published",
      },
      dialogFormVisible: false,
      balanceFormVisible: false,
      balanceData: {},
      dialogStatus: "",
      textMap: {
        update: "Edit",
        create: "Create",
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        type: [
          { required: true, message: "type is required", trigger: "change" },
        ],
        timestamp: [
          {
            type: "date",
            required: true,
            message: "timestamp is required",
            trigger: "change",
          },
        ],
        title: [
          { required: true, message: "title is required", trigger: "blur" },
        ],
      },
      downloadLoading: false,
      changeReference: false,
      recommendList: [],
      totalNum: {
        total_settlement_amount: 0,
        total_withdrawal_amount: 0,
        total_account_balance: 0,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getUserRecommend(id) {
      userRecommend({ id }).then((res) => {
        this.recommendList = res.data;
      });
    },
    errorHandler() {
      return true;
    },
    handleStatuChange(val, id) {
      userEdit({ id, status: val }).then(() => {
        this.getList();
      });
    },
    handleiInvitationChange(val, id) {
      userEdit({ id, invitation_status: val }).then(() => {
        this.getList();
      });
    },
    handleClick(tab) {
      switch (tab.name) {
        case "1":
          this.getBaseInfo();
          break;
        case "2":
          this.getUserList();
          break;
        case "3":
          this.getOrderList();
          break;
        case "4":
          this.getBalanceList();
      }
    },
    handleOrderClick(tab) {
      switch (tab.name) {
        case "share":
          fetchShareList({
            ...this.orderListQuery,
            id: this.temp.id,
          }).then((response) => {
            this.orderList = response.data.list;
            this.orderTotal = response.data.total;
          });
          break;
        case "commission":
          fetchCommissionList({
            ...this.orderListQuery,
            id: this.temp.id,
          }).then((response) => {
            this.orderList = response.data.list;
            this.orderTotal = response.data.total;
          });
          break;
      }
    },
    handleTopSuccess(res, file) {
      if (res.code === 200) {
        this.temp.headimgurl = res.data.image;
      } else {
        this.$message.error(res.msg);
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getBalanceList() {
      this.balanceList = [];
      getBalance({ ...this.balanceQuery, id: this.temp.id }).then((res) => {
        this.balanceList = res.data.list;
        this.balanceTotal = res.data.total;
      });
    },
    getList() {
      const params = JSON.parse(JSON.stringify(this.listQuery));
      if (params.created_at && params.created_at.length) {
        params.created_at = params.created_at.join(",");
      } else {
        params.created_at = "";
      }
      this.listLoading = true;
      fetchUserList(params).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        Object.assign(this.totalNum, response.data);
        this.listLoading = false;
      });
    },
    getUserList() {
      this.levelUserList = [];
      this.userTotal = 0;
      fetchLevelList({
        ...this.userListQuery,
        id: this.temp.id,
      }).then((response) => {
        this.levelUserList = response.data.users;
        this.userTotal = response.data.total;
      });
    },
    getOrderList() {
      this.orderList = [];
      this.handleOrderClick({ name: this.orderName });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    sortChange(data) {
      const defaultData = {
        total_settlement_sort: "",
        total_withdrawal_sort: "",
        account_balance_sort: "",
      };
      Object.assign(this.listQuery, defaultData);
      const { prop, order } = data;
      if (prop === "total_settlement_amount") {
        this.sortBySettlement(order);
      } else if (prop === "total_withdrawal_amount") {
        this.sortByWithdrawal(order);
      } else if (prop === "account_balance") {
        this.sortByBalance(order);
      }
    },
    sortBySettlement(order) {
      if (order === "ascending") {
        this.listQuery.total_settlement_sort = "asc";
      } else {
        this.listQuery.total_settlement_sort = "desc";
      }
      this.handleFilter();
    },
    sortByWithdrawal(order) {
      if (order === "ascending") {
        this.listQuery.total_withdrawal_sort = "asc";
      } else {
        this.listQuery.total_withdrawal_sort = "desc";
      }
      this.handleFilter();
    },
    sortByBalance(order) {
      if (order === "ascending") {
        this.listQuery.account_balance_sort = "asc";
      } else {
        this.listQuery.account_balance_sort = "desc";
      }
      this.handleFilter();
    },
    handleUpdate(row) {
      this.temp = row;
      this.activeName = "1";
      this.getUserRecommend(this.temp.id);
      userIncome({
        id: this.temp.id,
      }).then((response) => {
        Object.assign(this.temp, response.data);
        this.changeReference = !this.temp.p_nickname;
        this.dialogFormVisible = true;
      });
    },
    getBaseInfo() {
      this.getUserRecommend(this.temp.id);
      userIncome({
        id: this.temp.id,
      }).then((response) => {
        Object.assign(this.temp, response.data);
      });
    },
    handleUpdateBalance(row) {
      this.balanceData = {
        id: row.id,
      };
      this.balanceFormVisible = true;
    },
    updateBalance() {
      adjustBalance(this.balanceData).then(() => {
        this.$message({ message: "操作成功", type: "success" });
        this.balanceFormVisible = false;
        this.getList();
      });
    },
    updateData() {
      userEdit(this.temp).then(() => {
        this.$message({ message: "操作成功", type: "success" });
        this.dialogFormVisible = false;
        this.getList();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.goodsInfo {
  display: flex;
  align-items: center;
  .textBox {
    text-align: left;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .content {
      width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.dataBox {
  width: 100%;
  padding: 20px 0 0 0;
  border-top: 1px solid #333;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .item {
    width: calc(25%);
    margin-bottom: 20px;
  }
}
.avatar-uploader {
  ::v-deep .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:hover {
      border-color: #409eff;
    }
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
.totalBox {
  font-size: 14px;
  font-weight: bold;
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
</style>
